<template>
	<view class="container">
		<view class="" style="color: red;padding: 30rpx 0;">
			<text>所有公开的新闻数据</text>
		</view>
		<button @click="test">查询文章和用户表</button>
		<button @click="getData">分页查询数据</button>
		<!--列表分页所需参数 page-data='replace'  :getcount="true"  :page-size='2' -->
		<unicloud-db ref='udb' v-slot:default="{data,pagination, loading, error, options}" :collection="colList"
		 orderby="last_modify_date desc">
			<view v-if="error">{{error.message}}</view>
			<view v-else>
				<view class="" v-for="(item,index) in data" :key="item._id">
					<uni-card :title="item.title" :isFull="true" :sub-title="item.user_id[0].username" :extra="item.category_id.length!=0?item.category_id[0].name:'未分类'" 
					@click="enterNews(item._id,data)"
					:thumbnail="item.avatar?item.avatar:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'">
						<rich-text class="uni-body richText" :nodes="item.excerpt"></rich-text>  
						<view slot="actions" class="card-actions">
							<view class="card-actions-item" @click.stop="actionsClick('del',item._id,item.user_id[0]._id)">
								<uni-icons type="trash" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">删除</text>
							</view>
							<view class="card-actions-item" @click.stop="actionsClick('dianzan','点赞')">
								<uni-icons type="heart" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">点赞 {{item.like_count?item.like_count:0}}</text>
							</view>
							<view class="card-actions-item" @click.stop="actionsClick('comment','评论')">
								<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">评论 {{item.comment_count?item.comment_count:0}}</text>
							</view>
						</view>
					</uni-card>
				</view>
			</view>
			<!-- 列表分页 -->
			<!-- <uni-pagination show-icon :page-size="pagination.size" :total="pagination.count" @change="onpagination" /> -->
		</unicloud-db>
		<uni-fab
			horizontal='right'
			:content="content"
			@trigger="trigger"
		></uni-fab>
		
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	 const db = uniCloud.database()
	 const add = uniCloud.importObject('addInc') 
	export default {
		data() {
			return {
				colList: [
					db.collection('opendb-news-articles').where('article_status==1')
					  .field('user_id,category_id,title,content,excerpt,article_status,comment_status,comment_count,like_count,avatar,publish_date,last_modify_date')
					  .getTemp(),
					db.collection('opendb-news-categories').getTemp(),
					db.collection('uni-id-users').field('_id,username').getTemp(),
				],
				readOnly: false,
				content:[
					{
						iconPath:'/static/image/case.png',selectedIconPath:'/static/image/case1.png',text:'新闻',active:false,
					},
					{
						iconPath:'/static/image/index.png',selectedIconPath:'/static/image/index1.png',text:'分类',active:false,
					},
				]
			}
		},
		computed:{
			...mapGetters({
				infor:'user/info'
			})
		},
		methods: {
			test(){
				let artical=db.collection('opendb-news-articles')
				.where('article_status == 1 && user_id==$cloudEnv_uid')
				.getTemp()
				let categories=db.collection('opendb-news-categories').field('_id,name').getTemp()
				let user=db.collection('uni-id-users')
				.field('_id,username')
				.getTemp()
				
				// 最后联表查询时，如果需要添加where，则需要按照查询出来的数据格式进行匹配
				// .where('user_id._id==$cloudEnv_uid')
				// .where('user_id._id=="6182516a1096a10001d9a6da"')
				// .where('category_id.name=="综艺"') //条件的查询一定要在数据中有返回，否则条件就无效
				db.collection(artical,categories,user)
				.get().then(res=>{
					console.log(res)
				}).catch(err=>{
					console.log(err)
				})
				
				/* 
				 这种就正常查询，articles的多个字段关联user的同一个字段，articles作为主表，正常查询没问题
				  .where("'article_status' == 1")
				  user_id==$cloudEnv_uid //error
				  user_id._id==$cloudEnv_uid // right
				  这里的联表查询条件，返回的数据结构是什么样子，条件要跟其符合，例如，返回的用户表数据是
				  数组形式，name条件的查询格式也要跟其相符，如果使用user_id==$cloudEnv_uid，则绝对查不出来的；
				  其次，如果查询出来的数据，不符合表的权限，则会报权限相关错误；
				  user_id._id==$cloudEnv_uid && article_status == 0 //right
				  如果仅仅是article_status == 0 条件，则不符合表的权限，
				  而如果是'article_status' == 1，则符合表的权限
				  db.collection('opendb-news-articles,uni-id-users')
				  // opendb-news-articles作为主表查询
				  .where("user_id._id==$cloudEnv_uid && article_status == 0")
				  // user_id.username,user_id._id原先可以写成user_id{username,_id}
				  .field('avatar,title,last_modify_date,article_status,user_id.username,user_id._id')
				  .get().then(res=>{
				  	console.log(res)
				  })
				*/

				
				/*
				user作为主表查询;
				user的一个字段，关联article的多个字段，user作为主表查询时，需要指定关联的字段
				uni-id-users作为主表的查询,如果不返回_id,则报`未找到主表与副表之间的关联关系`
				怎么过滤副表中的字段
				opendb-news-articles{avatar,title,last_modify_date,article_status}
				
				db.collection('uni-id-users,opendb-news-articles')
				.foreignKey('opendb-news-articles.user_id')
				.where("_id._value==$cloudEnv_uid")
				.field('username,_id')
				.get().then(res=>{
					console.log(res)
				})
				*/
			},
			trigger(e){
				console.log(e)
				if(e.index==0){
					uni.navigateTo({ //进入新闻编辑
						url:'/pages/opendb-news-articles/list',
						events:{
							// 监听新增数据成功后, 刷新当前页面数据
							refreshData:()=>{
								// this.$refs.udb.loadData({
								//   clear: true
								// })
							}
						}
					})
				}else{ //进入分类
					uni.navigateTo({
						url:'/pages/opendb-news-categories/list',
						events:{
							// 监听新增数据成功后, 刷新当前页面数据
							refreshData:()=>{
								// this.$refs.udb.loadData({
								//   clear: true
								// })
							}
						}
					})
				}
				
			},
			enterNews(id,resulte){
				console.log(id,resulte)
				uni.navigateTo({
					url:'/pages/opendb-news-articles/detail?id='+id,
					events: {
					    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					    refreshArtical:async (data)=> {
					      console.log(data,'新闻列表刷新')
						  let index=resulte.findIndex(item=>item._id==data.article_id)
						  if(data.type=='dianzan'){
							  resulte[index].like_count?resulte[index].like_count:0 
							  if(data.handleType=='add'){//新增点赞
								  resulte[index].like_count+=1
							  }else{//减少点赞
								   resulte[index].like_count-=1
							  }
						  }else{//评论的操作
								resulte[index].comment_count?resulte[index].comment_count:0
								if(data.handleType=='add'){//新增评论
									resulte[index].comment_count +=1
								}else{//减少评论
									resulte[index].comment_count -=1
								} 
						  }
					    }
					},
				})
			},
			async actionsClick(type,id,userId){
				// console.log(type,id,this.infor)
				if(type=='del'){//删除
					let roles=await add.getUserRole(this.infor.uid)
					if(userId==this.infor.uid||roles.data.role.includes('USER_ADMIN')){
						uni.showModal({
							title: '删除',
							content: '是否删除该文章',
							success: function (res) {
								if (res.confirm) {
									db.collection('opendb-news-articles').doc(id).update({
										article_status:0
									}).then(res=>{
										console.log(res)
										// 重新加载当前页面
										this.$refs.udb.refresh()
										uni.showToast({
											title:'success',
											icon:'none'   
										})
									})
								}
							}
						})
					}else{
						uni.showToast({
							title:'非文章作者,无操作权限',
							icon:'none'
						})
					}
					
				}else if(type=='dianzan'){//点赞
					uni.showToast({
						title:'进入详情去点赞吧',
						icon:'none'
					})
				}else{//评论
					uni.showToast({
						title:'进入详情去评论吧',
						icon:'none'
					})
				}
				
			},
			// 手动查询分页数据测试
			async getData(){
				let res=await db.collection('opendb-news-articles')
				  .where('article_status==1').field('_id,title,excerpt,content')
				  .skip(0) // 跳过前n条
				  .limit(2) // 获取n条
				  .get()
				// console.log(res.result.data)
				
			},
			// 列表分页加载数据
			// onpagination(e) {
			// 	this.$refs.udb.loadData({
			// 	  current: e.current
			// 	})
			// }
		},
		// onReachBottom() { //滚动到底翻页
		//     this.$refs.udb.loadMore()
		// },
		async onPullDownRefresh(){
			// 获取数据
			this.$refs.udb.loadData({clear: true}, (data)=>{
				console.log(data)
				uni.stopPullDownRefresh();
			})
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},5000)
		} 
	}
</script>

<style scoped lang="scss">
	.richText{
		overflow: hidden;
		-webkit-box-orient:vertical;
		display:-webkit-box;
		-webkit-line-clamp:3;
		word-wrap:break-all;
		
	}
	.card-actions{
		display: flex;align-items: center;
		height:80rpx;
		border-top: 1px solid #f8f8f8;
		.card-actions-item{
			flex: 1;text-align: center;
		}
	}
</style>
